<!--  -->
<template>
  <div class="toast">
  <i 
    :class="$store.state.toastType === 'success' ? 'iconfont icon-select':'iconfont icon-close'"
  ></i>
   <span>{{$store.state.toastMsg}}</span>
  </div>
</template>

<script>
export default {
  name:"Toast",
  data () {
    return {
    };
  },

  
}

</script>
<style lang='less' scoped>
.toast{
  position: fixed;
  padding: 10px 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border-radius: 10px;
  .iconfont{
    margin-right: 10px;
  }
  .icon-close{
    color: red;
  }
  .icon-select{
    color: green;
  }
}
</style>